<template>
  <div>
    <el-select
      v-model="selectValue"
      :filterable="search"
      :style="{ width: width }"
      clearable="clearable"
      placeholder="请选择"
      @change="change($event)"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.orgName"
        :value="item.id"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: 'Select'
}
</script>

<script setup>
import { getOrgAccountListLast } from '@/api/api'
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Warning
} from '@element-plus/icons-vue'

const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  value: {
    default: '',
    type: String
  },
  search: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['change', 'update:value'])
const options = ref([])
const selectValue = ref('')
const selected = ref('')

onMounted(() => {
  init()
})

const init = async () => {
  options.value = []
  try {
    const res = await getOrgAccountListLast({
      pageNum: 1,
      pageSize: 10000
    })
    if (res.succeed) {
      options.value = res.data
    }
  } catch (error) {
    console.log('error: ' + error)
  }
}
const change = val => {
  // console.log('val', 121, val)
  // selected.value = options.value.find(item => {
  //   return item.id === val
  // })
  emit('update:value', val)
  // emit('change', selected.value)
}
</script>

<style></style>
